<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>发布类目选择</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

    <style type="text/css">
        body {
            background: #f4f4f4;
            background-position: center;
            background-size: cover;
            position: relative;
            font-size: 13px;
            csroll: no;
        }

        /*分类*/
        .contain {
            line-height: 1.4;
            background: #fff;
            overflow: hidden;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute;
        }

        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
            csroll: no;
        }

        .contain-left .aui-list-view-cell {
            padding: 12px;

        }

        .contain .aui-list-view:after {
            border: none;
        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }

        .contain-left, .contain-right {
            overflow-y: auto;
            height: 100%;
        }

        .contain-right {
            csroll: no;
            padding: 12px;
            width: 75%;
            float: left;
            display: inline-block;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .contain .aui-content {
            overflow-y: auto;
            position: relative;
        }

        .contain-right .pic img {
            width: 100%;
        }

        .tuijian-title {
            padding: 8px;
        }

        .aui-icon-sort {
            font-size: 20px !important;
        }

        .contain {
            height: 100%;
        }

        .other-title {
            text-align: center;
            padding: 15px;
            font-size: 14px;
            font-weight: 400;
            width: 100%;
            display: inline-block;
            position: relative;
        }

        .tuijian li {
            padding: 5px 15px;
            font-size: 12px;
            /*border:1px solid #a2a2a2;*/
            color: #a2a2a2;
            /*border-radius: 5px;*/
            float: left;
            margin: 0 12px 12px 0;
            position: relative;
            text-align: center;
        }

        /*.tuijian li:before{*/
        /*border:  1px solid #c8c7cc;*/
        /*-webkit-transform: scale(0.5);*/
        /*content: "";*/
        /*position: absolute;*/
        /*bottom: -100%;*/
        /*top:0;*/
        /*right: -100%;*/
        /*left:0;*/
        /*-webkit-transform-origin: 0 0;*/
        /*border-radius: 5px;*/
        /*}*/

        .tuijian li.active:before {
            border-color: #327afa;
        }

        .tuijian li.active {
            color: #327afa;
        }

        .aui-img-body.aui-ellipsis-1 {
            padding: 0;
        }

        .other-list li.aui-list-view-cell {
            overflow: inherit;
            border-radius: 5px;
        }

        .searchResult {
            display: none;
        }
    </style>
</head>
<body>
<!-- 分类 -->
<div class="fenlei">
    <div class="contain  mui-row mui-fullscreen">
        <div class="contain-left mui-col-xs-3">
            <div class="aui-content">
                <ul class="aui-list-view" id='Category-content'>
                    <!--一级分类-->
                    <!--<li class='aui-list-view-cell aui-ellipsis-1 aui-border-r active {{? i == 0}}active{{?}}' tapmode-->
                    <!--onclick='changeCategory(this)'>-->
                    <!--这个-->
                    <!--</li>-->
                    <!---->
                    <!--<li class='aui-list-view-cell aui-ellipsis-1 aui-border-r {{? i == 0}}active{{?}}' tapmode-->
                    <!--onclick='changeCategory(this)'>-->
                    <!--这个-->
                    <!--</li>-->
                </ul>
            </div>
        </div>
        <div class="contain-right mui-col-xs-9">


            <div class="tuijian">
                <div class="aui-content">
                    <!--<ul class="aui-list-view aui-grid-view" id='Other-content0'>-->

                    <!--<li class="active" tapmode onclick="changeCheck(this)">这个是子类</li>   -->

                    <!--</ul>-->
                    <div class="other" id="Other-content">
                        <!--二三级分类-->
                        <!--<ul>-->
                        <!--<li class="aui-list-view-cell aui-img aui-border " categoryTextTwo="{{=it[i].two.catname}}"-->
                        <!--categoryTextThree="{{=it[i].three.catname}}" categoryTextOne="{{=it[i].one.catname}}"-->
                        <!--categoryIdThree="{{=it[i].three.catid}}" onclick="checkSearchThis(this)">-->
                        <!--dddd-->
                        <!--</li>-->
                        <!--</ul>-->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="searchResult">
    <div class="tuijian">
        <div class="kongshuju">
            <p>暂无搜索类别，请重新搜索</p>
        </div>
        <div class="aui-content">
            <!--<ul class="aui-list-view aui-grid-view" id='Other-content0'>-->

            <!--<li class="active" tapmode onclick="changeCheck(this)">这个是子类</li>   -->

            <!--</ul>-->
            <div class="other" id="Search-content">
                <!--二三级分类-->


            </div>
        </div>
    </div>
</div>
<script id="Category-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}} {{? i > 0}}aui-border-r{{?}}' tapmode
        onclick='changeCategory(this), categorySubordinate({{=it[i].catid}})'>
        {{=it[i].catname}}
    </li>
    {{ } }}
</script>

<script id="Search-template" type="text/x-dot-template">
    <ul>
        {{ for(var i in it) { }}
        {{? it[i].three }}
        <li class="aui-list-view-cell aui-img aui-border " categoryTextTwo="{{=it[i].two.catname}}"
            categoryTextThree="{{=it[i].three.catname}}" categoryTextOne="{{=it[i].one.catname}}"
            categoryIdThree="{{=it[i].three.catid}}" onclick="checkSearchThis(this)">
            {{=it[i].three.catname}}
        </li>
        {{?? it[i].two }}

        <li class="aui-list-view-cell aui-img aui-border " categoryTextTwo="{{=it[i].two.catname}}"
            categoryTextOne="{{=it[i].one.catname}}"
            categoryIdThree="{{=it[i].two.catid}}" onclick="checkSearchThis(this)">

            {{=it[i].two.catname}}

        </li>
        {{??}}

        <li class="aui-list-view-cell aui-img aui-border " categoryTextOne="{{=it[i].one.catname}}"
            categoryIdThree="{{=it[i].one.catid}}" onclick="checkSearchThis(this)">

            {{=it[i].one.catname}}
        </li>
        {{?}}

        {{}}}

    </ul>


</script>

<script id="Other-template" type="text/x-dot-template">

    {{ for(var i in it) { }}
    {{?it[i].arr}}
    <div class="other-list">
        <div class="other-title aui-border-b aui-ellipsis-1" atogaryIdTwo="{{=it[i].catid}}">
            {{=it[i].catname}}
        </div>
        <ul style="padding-top:10px;">
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-border " catogaryIdThree="{{=it[i].arr[b].catid}}"
                onclick="checkThis(this)">
                <div class="aui-img-body aui-ellipsis-1">
                    {{=it[i].arr[b].catname}}
                </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{?}}
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    //单击时候保存左侧分类的文字和id
    var categoryIdOne, categoryTextOne, categoryIdTwo, categoryTextTwo, categoryIdThree, categoryTextThree,ShowHotText;
    apiready = function () {
        api.parseTapmode();
        // getTrade();
        // getBrand();
        // getMarket();
        // hotCategory();
        // categoryImage();
//        clearStorage("releaseCategoryId")
//        clearStorage("releaseCategoryText")
        hotCategory();
        showHotCategory();
    };
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
    }

    function changeCategory(obj) {
        categoryTextOne = $(obj).text();
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        if($(obj).index()==0){
            $("#Other-content").html(ShowHotText);
        }
    }
    //增加商品推荐分类及一级分类
    function hotCategory() {
        showLoading();
        var data = {
            'moduleid': '16',
        };
        var url = 'category/categoryOne';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Category-content');
                var tpl = $api.byId('Category-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                //商品推荐
//                var content = $api.byId('Other-content');
//                var tpl = $api.byId('Other-template').text;
//                var tempFn = doT.template(tpl);
//                $api.html(content, '');
//                $api.prepend(content, tempFn(ret.msg[0].arr));
                $("#Other-content").html(ShowHotText);//显示记忆功能的额数据
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }
    //增加分类下面下级分类
    function categorySubordinate(catid) {
        categoryIdOne = catid;
        showLoading();
        var data = {};
        if (catid == '' || catid == null) {
            hideLoading();
            return;
        }
        var url = 'category/categorysubordinate/moduleid/16/parentid/' + catid;
        ajaxRequest(url, 'get', data, function (ret, err) {
            var content = $api.byId('Other-content');
            $api.html(content, '');
            if (ret.status == 1) {
                var tpl = $api.byId('Other-template').text;
                var tempFn = doT.template(tpl);
                $api.prepend(content, tempFn(ret.msg.arr));
                //                var categoryImage = $api.byId('categoryImage');
                $('#categoryImage').attr('src', ret.msg.top_src);
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                if (catid) {
                    api.toast({
                        msg: '数据为空',
                        duration: 2000,
                        location: 'bottom'
                    })
                }

            }
            if (err) {
                hideLoading();
                if (catid) {
                    api.toast({
                        msg: '网络错误',
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            }
        })
    }
    //    单击选择分类
    function checkThis(obj) {
        categoryIdThree = $(obj).attr("catogaryIdThree");
        categoryTextThree = $(obj).find("div").text();
        categoryTextTwo = $(obj).parents(".other-list").find(".other-title").text();
        var categoryText = categoryTextOne + "-" + categoryTextTwo + "-" + categoryTextThree;
        api.sendEvent({
            name: "setCategory",
            extra: {
                categoryId: categoryIdThree,
                categoryText: categoryText
            }
        });
        //设置存储在本地，记忆选择
        setMemoryCategory(categoryIdThree,categoryText);
        closeWin();
    }
    //    单击选择分类
    function checkSearchThis(obj) {
        categoryIdThree = $(obj).attr("categoryIdThree");
        categoryTextThree = $(obj).attr("categoryTextThree");
        categoryTextTwo = $(obj).attr("categoryTextTwo");
        categoryTextOne = $(obj).attr("categoryTextOne");

        categoryTextOne = typeof(categoryTextOne) == 'undefined' ? "" : (categoryTextOne);
        categoryTextTwo = typeof(categoryTextTwo) == 'undefined' ? "" : ("-" + categoryTextTwo);
        categoryTextThree = typeof(categoryTextThree) == 'undefined' ? "" : ("-" + categoryTextThree);
//
        var categoryText = categoryTextOne + categoryTextTwo + categoryTextThree;
        api.sendEvent({
            name: "setCategory",
            extra: {
                categoryId: categoryIdThree,
                categoryText: categoryText
            }
        });
        setMemoryCategory(categoryIdThree,categoryText);
        closeWin();

    }

    //设置存储在本地，记忆选择
    function setMemoryCategory(releaseCategoryId,categoryText) {
        //判断是否存在，存在的话就不在记录
        var categoryIds=getLocalStorage("releaseCategoryId",",");
        var isExist=false
        if(categoryIds){
//            var categoryIdsArray=getLocalStorage("releaseCategoryId",",");
            for (var i=0;i<categoryIds.length;i++){
                if(releaseCategoryId==categoryIds[i]){
                    isExist=true;
                }
            }

        }
        if(!isExist){
            setLocalStorage("releaseCategoryId", releaseCategoryId);
            setLocalStorage("releaseCategoryText", categoryText);
        }
    }
    function showSearchCategory(myData) {
        $(".fenlei").hide();
        $(".searchResult").show();
        $("#Search-content").empty();


        showLoading();
        var data = {
            categoryName: myData
        };
        var url = 'category/categorySearch/';
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.status == 1) {
                //                var categoryImage = $api.byId('categoryImage');

                $(".kongshuju").hide();
                var content = $api.byId('Search-content');
                var tpl = $api.byId('Search-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));


                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                $(".kongshuju").show();
//                api.toast({
//                    msg: '数据为空',
//                    duration: 2000,
//                    location: 'bottom'
//                })


            }
        })
    }
    function searchBack() {
        $(".fenlei").show();
        $(".searchResult").hide();
    }
    //读取记忆的本地热门类别
    function showHotCategory() {
        var hotCategoryIds = getLocalStorage("releaseCategoryId");
        var hotCategoryTexts = getLocalStorage("releaseCategoryText");
        ShowHotText="";
        ShowHotText+='<ul>';
        for (var i=hotCategoryIds.length-1;i>=0;i--){
            ShowHotText+='<li class="aui-list-view-cell aui-img aui-border " CategoryText="'+hotCategoryTexts[i]+'" categoryId="'+hotCategoryIds[i]+'" onclick="checkHotCategory(this)">';
            //获取最后的那个，因为有时候搜索的选择可能是一级，二级类目
            ShowHotText+=toArray(hotCategoryTexts[i],"-")[toArray(hotCategoryTexts[i],"-").length-1];
            ShowHotText+='</li>';
        }
        ShowHotText+='</ul>';

    }
    function checkHotCategory(obj) {
        api.sendEvent({
            name: "setCategory",
            extra: {
                categoryId: $(obj).attr("categoryId"),
                categoryText: $(obj).attr("CategoryText")
            }
        });
        closeWin();
    }
</script>
</html>